<template>
    <div class="app-container">
        <div class="wrap">
            <div class="detail-box panel">
                <div class="detail-box-left">
                    <electricity :is-station="true" :station-id="stationId" />
                </div>
                <div class="detail-box-right">
                    <station-info :station-id="stationId" />
                </div>
            </div>

            <div class="detail-box panel">
                <div class="detail-box-left">
                    <statistics :station-id="stationId" :height="244" :is-station="true" />
                </div>
                <div class="detail-box-right">
                    <enconomy :station-id="stationId" />
                </div>
            </div>

            <div class="detail-box panel">
                <devices :station-id="stationId" />
            </div>
        </div>
    </div>
</template>
<script setup name="StationInfoModule">
import { useRoute } from 'vue-router'
import Electricity from '/@/components/Electricity/index.vue'
import StationInfo from '/@/components/StationInfo/index.vue'
import Statistics from '/@/components/Statistics/index.vue'
import Enconomy from '/@/components/Economy/index.vue'
import Devices from '/@/components/Devices/index.vue'

const route = useRoute()
const stationId = parseInt(route.query.id)
</script>
<style lang="css" scoped>
.wrap {
    padding: 0;
}
</style>
